import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  ArrowLeft, 
  Info, 
  Code, 
  Play, 
  Lightbulb,
  Download,
  Share2
} from 'lucide-react';
import { DesignPattern, DemoState } from '@/types';
import OverviewTab from './tabs/OverviewTab';
import CodeTab from './tabs/CodeTab';
import DemoTab from './tabs/DemoTab';
import ExamplesTab from './tabs/ExamplesTab';

interface PatternDetailProps {
  pattern: DesignPattern;
  selectedTab: string;
  demoState: DemoState;
  onBack: () => void;
  onTabChange: (tab: string) => void;
  onDemoStart: () => void;
  onDemoPause: () => void;
  onDemoReset: () => void;
  onDemoStep: () => void;
}

const tabs = [
  { id: 'overview', label: '概述', icon: Info },
  { id: 'code', label: '代码实现', icon: Code },
  { id: 'demo', label: '交互演示', icon: Play },
  { id: 'examples', label: '使用场景', icon: Lightbulb }
];

const PatternDetail: React.FC<PatternDetailProps> = ({
  pattern,
  selectedTab,
  demoState,
  onBack,
  onTabChange,
  onDemoStart,
  onDemoPause,
  onDemoReset,
  onDemoStep
}) => {
  const [isCodeCopied, setIsCodeCopied] = useState(false);

  const handleCopyCode = async () => {
    try {
      await navigator.clipboard.writeText(pattern.code);
      setIsCodeCopied(true);
      setTimeout(() => setIsCodeCopied(false), 2000);
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  const renderTabContent = () => {
    switch (selectedTab) {
      case 'overview':
        return <OverviewTab pattern={pattern} />;
      case 'code':
        return (
          <CodeTab 
            pattern={pattern} 
            onCopy={handleCopyCode}
            isCopied={isCodeCopied}
          />
        );
      case 'demo':
        return (
          <DemoTab
            pattern={pattern}
            demoState={demoState}
            onStart={onDemoStart}
            onPause={onDemoPause}
            onReset={onDemoReset}
            onStep={onDemoStep}
          />
        );
      case 'examples':
        return <ExamplesTab pattern={pattern} />;
      default:
        return <OverviewTab pattern={pattern} />;
    }
  };

  return (
    <div className="min-h-full flex flex-col bg-white">
      {/* Header */}
      <motion.div 
        className="bg-gradient-to-r from-primary-600 to-secondary-600 text-white p-6"
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <motion.button
              onClick={onBack}
              className="p-2 rounded-lg bg-white/20 hover:bg-white/30 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <ArrowLeft className="w-5 h-5" />
            </motion.button>
            
            <div>
              <h1 className="text-2xl font-bold">{pattern.name}</h1>
              <div className="flex items-center space-x-4 mt-2">
                <span className="text-sm bg-white/20 px-3 py-1 rounded-full">
                  {pattern.category === 'creational' ? '创建型模式' : 
                   pattern.category === 'structural' ? '结构型模式' : '行为型模式'}
                </span>
                <span className={`text-sm px-3 py-1 rounded-full ${
                  pattern.difficulty === '简单' ? 'bg-green-500/20 text-green-200' :
                  pattern.difficulty === '中等' ? 'bg-yellow-500/20 text-yellow-200' :
                  'bg-red-500/20 text-red-200'
                }`}>
                  {pattern.difficulty}
                </span>
              </div>
            </div>
          </div>
          
          <div className="flex items-center space-x-2">
            <motion.button
              className="p-2 rounded-lg bg-white/20 hover:bg-white/30 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              title="分享"
            >
              <Share2 className="w-5 h-5" />
            </motion.button>
            <motion.button
              className="p-2 rounded-lg bg-white/20 hover:bg-white/30 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              title="下载"
            >
              <Download className="w-5 h-5" />
            </motion.button>
          </div>
        </div>
      </motion.div>

      {/* Tabs */}
      <div className="sticky top-20 z-40 bg-white border-b border-gray-200 shadow-sm">
        <div className="flex">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            const isActive = selectedTab === tab.id;
            
            return (
              <motion.button
                key={tab.id}
                onClick={() => onTabChange(tab.id)}
                className={`flex items-center space-x-2 px-6 py-4 text-sm font-medium transition-all duration-200 ${
                  isActive
                    ? 'text-primary-600 border-b-2 border-primary-600 bg-primary-50'
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                }`}
                whileHover={{ y: -1 }}
              >
                <Icon className="w-4 h-4" />
                <span>{tab.label}</span>
              </motion.button>
            );
          })}
        </div>
      </div>

      {/* Tab Content */}
      <div className="flex-1 overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={selectedTab}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3 }}
            className="h-full"
          >
            {renderTabContent()}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
};

export default PatternDetail;
